<template>
  <div class="collection-filter">
    <el-select
      :value="value"
      @change="handleChange"
      placeholder="合集"
      :loading="loading"
      size="mini"
      class="filter-select"
    >
      <el-option
        v-for="option in filterOptions"
        :key="option.value"
        :label="option.label"
        :value="option.value"
        class="filter-option"
      >
        <div class="option-content">
          <span v-if="option.value !== 'all'" 
                class="collection-dot"
                :style="{ backgroundColor: getOptionColor(option.value) }">
          </span>
          <span class="option-label">{{ option.label }}</span>
          <span v-if="showCount && option.count !== undefined" 
                class="option-count">
            ({{ option.count }})
          </span>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { collectionApi } from '@/api/collections'

export default {
  name: 'CollectionFilter',
  
  props: {
    value: {
      type: String,
      default: 'all'
    },
    showCount: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      baseFilterOptions: [],
      loading: false
    }
  },
  
  computed: {
    ...mapState('articles', ['collections', 'articles']),
    ...mapGetters('articles', ['articlesInCollection']),
    
    filterOptions() {
      const options = [
        { 
          label: '全部合集', 
          value: 'all',
          count: this.articles.length
        },
        { 
          label: '未分类', 
          value: '',
          count: this.articlesInCollection('').length
        }
      ]
      
      if (this.collections && this.collections.length > 0) {
        this.collections.forEach(collection => {
          options.push({
            label: collection.name,
            value: collection.id,
            count: this.articlesInCollection(collection.id).length
          })
        })
      }
      
      return options
    }
  },
  
  async created() {
    if (!this.collections || this.collections.length === 0) {
      await this.$store.dispatch('articles/loadCollections')
    }
  },
  
  methods: {
    handleChange(value) {
      this.$emit('change', value)
      this.$emit('input', value)
    },
    
    getOptionColor(collectionId) {
      if (collectionId === 'all') return '#409EFF'
      if (collectionId === '') return '#C0C4CC'
      return collectionApi.getCollectionColor(collectionId)
    }
  }
}
</script>

<style lang="scss" scoped>
.collection-filter {
  .filter-select {
    min-width: 100px;
  }
  
  .filter-option .option-content {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    
    .collection-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    
    .option-label {
      flex: 1;
      font-size: 13px;
      color: #303133;
    }
    
    .option-count {
      font-size: 11px;
      color: #909399;
      margin-left: auto;
    }
  }
}
</style>